<template>
  <div class="echartsBox">
    <div class="soilHead">
      <div class="soilTitle">
        <table class="typeLevel">
          <tr>
            <td rowspan="2">元素 <i /></td>
            <td colspan="6">分级 <i /></td>
          </tr>
          <tr>
            <td>极酸<i /></td>
            <td>强酸<i /></td>
            <td>酸性<i /></td>
            <td>微酸<i /></td>
            <td>中性<i /></td>
            <td>碱性<i /></td>
          </tr>
        </table>
      </div>
      <div class="soilTitleValue">
        <span class="_text">pH</span>
        <div id="ph_echarts" ref="ph_echarts" class="_progress_box" />
      </div>
    </div>
    <div class="line" />
    <div class="soilHead">
      <div class="soilTitle">
        <table class="typeLevel">
          <tr>
            <td rowspan="2">元素 <i /></td>
            <td colspan="6">分级 <i /></td>
          </tr>
          <tr>
            <td>极缺<i /></td>
            <td>缺乏<i /></td>
            <td>偏低<i /></td>
            <td>适中<i /></td>
            <td>丰富<i /></td>
            <td>极富<i /></td>
          </tr>
        </table>
      </div>
      <div class="soilTitleValue">
        <span class="_text">有机质</span>
        <div id="om_echarts" class="_progress_box" />
      </div>
      <div class="soilTitleValue">
        <span class="_text">速效氮</span>
        <div id="n_echarts" class="_progress_box" />
      </div>
      <div class="soilTitleValue">
        <span class="_text">速效磷</span>
        <div id="p_echarts" class="_progress_box" />
      </div>
      <div class="soilTitleValue">
        <span class="_text">速效钾</span>
        <div id="k_echarts" class="_progress_box" />
      </div>
      <div class="soilTitleValue">
        <span class="_text">&nbsp;&nbsp;&nbsp;&nbsp;全氮</span>
        <div id="allN_echarts" class="_progress_box" />
      </div>
    </div>
    <div class="soilFooter">
      <div class="footer_header">
        <div class="footer_header_left">
          <span />
          <span>温馨提示</span>
        </div>
      </div>
      <div class="footer_item2">
        该田块PH、有机质、无机养分（全氮、速效氮、有效磷、速效钾）均处于适中水平，请按照农事操作建议适时用肥。10cm土壤含水率37.12%，土温26.81℃。40cm土壤含水率37.46%，土温24.93℃。土壤含水率中等偏上、土温正常，但近期没有明显降雨，请注意灌水保持田间湿润。
      </div>
    </div>
  </div>
</template>

<script>
import { http_farmland } from '@/api';
export default {
  props: ['fieldId'],
  data() {
    return {
      color: ['#d2b943', '#2fbbc4', '#2F92D9', '#45CA79', '#ff9569', '#ff4e5f'],
      soilInfo: null
    };
  },
  mounted() {
    this.getQueryFieldSoilInfo();
  },
  methods: {
    // 初始化ph值
    initPh(val) {
      var color = '';
      var name = '';
      if (val > 7.5) {
        color = this.color[5];
        name = '碱性';
      } else if (val > 6.5) {
        color = this.color[4];
        name = '中性';
      } else if (val > 5.5) {
        color = this.color[3];
        name = '微酸';
      } else if (val > 4.5) {
        color = this.color[2];
        name = '酸性';
      } else if (val > 3.5) {
        color = this.color[1];
        name = '强酸';
      } else {
        color = this.color[0];
        name = '极酸';
      }
      this.initPh_echarts(name, color, val);
    },
    // 初始化ph_echarts
    initPh_echarts(name, color, val) {
      var myChart = this.$echarts.init(document.getElementById('ph_echarts'));
      var option = {
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          type: 'category',
          show: false,
          data: [''],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          containLabel: false
        },
        series: [
          {
            type: 'bar',
            name: name,
            z: 10,
            itemStyle: {
              normal: {
                color: color,
                barBorderRadius: 0
              }
            },
            label: {
              normal: {
                show: true,
                formatter: '{a|' + val + '}',
                rich: {
                  a: {
                    color: '#fff',
                    lineHeight: 54,
                    align: 'center',
                    fontSize: 16
                  }
                },
                position: 'insideLeft'
              }
            },
            data: [val]
          },
          {
            type: 'bar',
            name: '极酸',
            z: 6,
            itemStyle: {
              normal: {
                color: '#EDE5AF',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [3.5]
          },
          {
            type: 'bar',
            name: '强酸',
            z: 5,
            label: {
              normal: {
                show: true,
                formatter: '{a}',
                position: 'insideRight'
              }
            },
            barGap: '-100%',
            data: [4.5]
          },
          {
            type: 'bar',
            name: '酸性',
            z: 4,
            itemStyle: {
              normal: {
                color: '#AFD4F0',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [5.5]
          },
          {
            type: 'bar',
            name: '微酸',
            z: 3,
            itemStyle: {
              normal: {
                color: '#9FE8C3',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [6.5]
          },
          {
            type: 'bar',
            name: '中性',
            z: 2,
            itemStyle: {
              normal: {
                color: '#F5CEB4',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [7.5]
          },
          {
            type: 'bar',
            name: '碱性',
            z: 1,
            itemStyle: {
              normal: {
                color: '#FAAFB8',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [10]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 初始化有机质
    initOm(val) {
      var color = '';
      var name = '';
      if (val > 40) {
        color = this.color[5];
        name = '极富';
      } else if (val > 30) {
        color = this.color[4];
        name = '丰富';
      } else if (val > 20) {
        color = this.color[3];
        name = '适中';
      } else if (val > 10) {
        color = this.color[2];
        name = '偏低';
      } else if (val > 6) {
        color = this.color[1];
        name = '缺乏';
      } else {
        color = this.color[0];
        name = '极缺';
      }
      this.initOm_echarts(name, color, val);
    },
    initOm_echarts(name, color, val) {
      var myChart = this.$echarts.init(document.getElementById('om_echarts'));
      var option = {
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          type: 'category',
          show: false,
          data: [''],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        grid: {
          left: '0',
          right: '0',
          bottom: '0',
          top: '0',
          containLabel: false
        },
        series: [
          {
            type: 'bar',
            name: name,
            z: 10,
            itemStyle: {
              normal: {
                color: color,
                barBorderRadius: 0
              }
            },
            label: {
              normal: {
                show: true,
                formatter: '{a|' + val + '(g/kg)' + '}',
                rich: {
                  a: {
                    color: '#fff',
                    lineHeight: 54,
                    align: 'center',
                    fontSize: 14
                  }
                },
                position: 'insideLeft'
              }
            },
            data: [val]
          },
          {
            type: 'bar',
            name: '极缺',
            z: 6,
            itemStyle: {
              normal: {
                color: '#EDE5AF',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [6]
          },
          {
            type: 'bar',
            name: '缺乏',
            z: 5,
            itemStyle: {
              normal: {
                color: '#9FE7E9',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [10]
          },
          {
            type: 'bar',
            name: '偏低',
            z: 4,
            itemStyle: {
              normal: {
                color: '#AFD4F0',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [20]
          },
          {
            type: 'bar',
            name: '适中',
            z: 3,
            itemStyle: {
              normal: {
                color: '#9FE8C3',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [30]
          },
          {
            type: 'bar',
            name: '丰富',
            z: 2,
            itemStyle: {
              normal: {
                color: '#F5CEB4',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [40]
          },
          {
            type: 'bar',
            name: '极富',
            z: 1,
            itemStyle: {
              normal: {
                color: '#FAAFB8',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [50]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 初始化氮磷钾
    // 氮
    initN(val) {
      var color = '';
      var name = '';
      if (val > 150) {
        color = this.color[5];
        name = '极富';
      } else if (val > 120) {
        color = this.color[4];
        name = '丰富';
      } else if (val > 90) {
        color = this.color[3];
        name = '适中';
      } else if (val > 60) {
        color = this.color[2];
        name = '偏低';
      } else if (val > 30) {
        color = this.color[1];
        name = '缺乏';
      } else {
        color = this.color[0];
        name = '极缺';
      }
      this.initN_echarts(name, color, val);
    },
    initN_echarts: function(name, color, val) {
      var myChart = this.$echarts.init(document.getElementById('n_echarts'));
      var option = {
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          type: 'category',
          show: false,
          data: [''],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        grid: {
          left: '0',
          right: '0',
          bottom: '0',
          top: '0',
          containLabel: false
        },
        series: [
          {
            type: 'bar',
            z: 10,
            itemStyle: {
              normal: {
                color: color,
                barBorderRadius: 0
              }
            },
            label: {
              normal: {
                show: true,
                formatter: '{a|' + val + '(mg/kg)' + '}',
                rich: {
                  a: {
                    color: '#fff',
                    lineHeight: 54,
                    align: 'left',
                    fontSize: 14
                  }
                },
                position: 'insideLeft'
              }
            },
            data: [val]
          },
          {
            type: 'bar',
            name: '极缺',
            z: 6,
            itemStyle: {
              normal: {
                color: '#EDE5AF',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [30]
          },
          {
            type: 'bar',
            name: '缺乏',
            z: 5,
            itemStyle: {
              normal: {
                color: '#9FE7E9',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [60]
          },
          {
            type: 'bar',
            name: '偏低',
            z: 4,
            itemStyle: {
              normal: {
                color: '#AFD4F0',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [90]
          },
          {
            type: 'bar',
            name: '适中',
            z: 3,
            itemStyle: {
              normal: {
                color: '#9FE8C3',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [120]
          },
          {
            type: 'bar',
            name: '丰富',
            z: 2,
            itemStyle: {
              normal: {
                color: '#F5CEB4',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [150]
          },
          {
            type: 'bar',
            name: '极富',
            z: 1,
            itemStyle: {
              normal: {
                color: '#FAAFB8',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [180]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 磷
    initP(val) {
      var color = '';
      var name = '';
      if (val > 40) {
        color = this.color[5];
        name = '极富';
      } else if (val > 20) {
        color = this.color[4];
        name = '丰富';
      } else if (val > 10) {
        color = this.color[3];
        name = '适中';
      } else if (val > 2) {
        color = this.color[2];
        name = '偏低';
      } else if (val > 3) {
        color = this.color[1];
        name = '缺乏';
      } else {
        color = this.color[0];
        name = '极缺';
      }
      this.initP_echarts(name, color, val);
    },
    initP_echarts: function(name, color, val) {
      var myChart = this.$echarts.init(document.getElementById('p_echarts'));
      var option = {
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          type: 'category',
          show: false,
          data: [''],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        grid: {
          left: '0',
          right: '0',
          bottom: '0',
          top: '0',
          containLabel: false
        },
        series: [
          {
            type: 'bar',
            z: 10,
            itemStyle: {
              normal: {
                color: color,
                barBorderRadius: 0
              }
            },
            label: {
              normal: {
                show: true,
                formatter: '{a|' + val + '(mg/kg)' + '}',
                rich: {
                  a: {
                    color: '#fff',
                    lineHeight: 54,
                    align: 'left',
                    fontSize: 14
                  }
                },
                position: 'insideLeft'
              }
            },
            data: [val]
          },
          {
            type: 'bar',
            name: '极缺',
            z: 6,
            itemStyle: {
              normal: {
                color: '#EDE5AF',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [3]
          },
          {
            type: 'bar',
            name: '缺乏',
            z: 5,
            itemStyle: {
              normal: {
                color: '#9FE7E9',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [5]
          },
          {
            type: 'bar',
            name: '偏低',
            z: 4,
            itemStyle: {
              normal: {
                color: '#AFD4F0',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [10]
          },
          {
            type: 'bar',
            name: '适中',
            z: 3,
            itemStyle: {
              normal: {
                color: '#9FE8C3',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [20]
          },
          {
            type: 'bar',
            name: '丰富',
            z: 2,
            itemStyle: {
              normal: {
                color: '#F5CEB4',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [40]
          },
          {
            type: 'bar',
            name: '极富',
            z: 1,
            itemStyle: {
              normal: {
                color: '#FAAFB8',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [60]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 钾
    initK(val) {
      var color = '';
      var name = '';
      if (val > 200) {
        color = this.color[5];
        name = '极富';
      } else if (val > 150) {
        color = this.color[4];
        name = '丰富';
      } else if (val > 100) {
        color = this.color[3];
        name = '适中';
      } else if (val > 50) {
        color = this.color[2];
        name = '偏低';
      } else if (val > 30) {
        color = this.color[1];
        name = '缺乏';
      } else {
        color = this.color[0];
        name = '极缺';
      }
      this.initK_echarts(name, color, val);
    },
    initK_echarts: function(name, color, val) {
      var myChart = this.$echarts.init(document.getElementById('k_echarts'));
      var option = {
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          type: 'category',
          show: false,
          data: [''],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        grid: {
          left: '0',
          right: '0',
          bottom: '0',
          top: '0',
          containLabel: false
        },
        series: [
          {
            type: 'bar',
            z: 10,
            itemStyle: {
              normal: {
                color: color,
                barBorderRadius: 0
              }
            },
            label: {
              normal: {
                show: true,
                formatter: '{a|' + val + '(mg/kg)' + '}',
                rich: {
                  a: {
                    color: '#fff',
                    lineHeight: 54,
                    align: 'left',
                    fontSize: 14
                  }
                },
                position: 'insideLeft'
              }
            },
            data: [val]
          },
          {
            type: 'bar',
            name: '极缺',
            z: 6,
            itemStyle: {
              normal: {
                color: '#EDE5AF',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [30]
          },
          {
            type: 'bar',
            name: '缺乏',
            z: 5,
            itemStyle: {
              normal: {
                color: '#9FE7E9',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [50]
          },
          {
            type: 'bar',
            name: '偏低',
            z: 4,
            itemStyle: {
              normal: {
                color: '#AFD4F0',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [100]
          },
          {
            type: 'bar',
            name: '适中',
            z: 3,
            itemStyle: {
              normal: {
                color: '#9FE8C3',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [150]
          },
          {
            type: 'bar',
            name: '丰富',
            z: 2,
            itemStyle: {
              normal: {
                color: '#F5CEB4',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [200]
          },
          {
            type: 'bar',
            name: '极富',
            z: 1,
            itemStyle: {
              normal: {
                color: '#FAAFB8',
                barBorderRadius: 0
              }
            },
            // label: {
            //     normal: {
            //         show: true,
            //         formatter: "{a}",
            //         position: "insideRight",
            //     },
            // },
            barGap: '-100%',
            data: [250]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 初始化全氮
    initAllN(val) {
      var color = '';
      var name = '';
      if (val > 2) {
        color = this.color[5];
        name = '极富';
      } else if (val > 1.5) {
        color = this.color[4];
        name = '丰富';
      } else if (val > 1) {
        color = this.color[3];
        name = '适中';
      } else if (val > 0.75) {
        color = this.color[2];
        name = '偏低';
      } else if (val > 0.5) {
        color = this.color[1];
        name = '缺乏';
      } else {
        color = this.color[0];
        name = '极缺';
      }
      val = parseFloat(val).toFixed(2);
      this.initAllN_echarts(name, color, val);
    },
    initAllN_echarts: function(name, color, val) {
      var myChart = this.$echarts.init(document.getElementById('allN_echarts'));
      var option = {
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          type: 'category',
          show: false,
          data: [''],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        grid: {
          left: '0',
          right: '0',
          bottom: '0',
          top: '0',
          containLabel: false
        },
        series: [
          {
            type: 'bar',
            z: 10,
            itemStyle: {
              normal: {
                color: color,
                barBorderRadius: 0
              }
            },
            label: {
              normal: {
                show: true,
                formatter: '{a|' + val + '(g/kg)' + '}',
                rich: {
                  a: {
                    color: '#fff',
                    lineHeight: 54,
                    align: 'left',
                    fontSize: 14
                  }
                },
                position: 'insideLeft'
              }
            },
            data: [val]
          },
          {
            type: 'bar',
            name: '极缺',
            z: 6,
            itemStyle: {
              normal: {
                color: '#EDE5AF',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [0.5]
          },
          {
            type: 'bar',
            name: '缺乏',
            z: 5,
            itemStyle: {
              normal: {
                color: '#9FE7E9',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [0.75]
          },
          {
            type: 'bar',
            name: '偏低',
            z: 4,
            itemStyle: {
              normal: {
                color: '#AFD4F0',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [1]
          },
          {
            type: 'bar',
            name: '适中',
            z: 3,
            itemStyle: {
              normal: {
                color: '#9FE8C3',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [1.5]
          },
          {
            type: 'bar',
            name: '丰富',
            z: 2,
            itemStyle: {
              normal: {
                color: '#F5CEB4',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [2]
          },
          {
            type: 'bar',
            name: '极富',
            z: 1,
            itemStyle: {
              normal: {
                color: '#FAAFB8',
                barBorderRadius: 0
              }
            },
            barGap: '-100%',
            data: [2.5]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    async getQueryFieldSoilInfo() {
      const result = await http_farmland.plant_detail({ id: this.$route.params.id });
      if (result.soilInfo) {
        this.soilInfo = JSON.parse(result.soilInfo);
        this.initPh(Number(this.soilInfo.ph).toFixed(2));
        this.initOm(Number(this.soilInfo.om).toFixed(2));
        this.initN(Number(this.soilInfo.totalN).toFixed(2));
        this.initP(Number(this.soilInfo.totalP).toFixed(2));
        this.initK(Number(this.soilInfo.totalK).toFixed(2));
        this.initAllN(Number(this.soilInfo.allN).toFixed(2));
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  flex: 1;
  position: relative;
  overflow-y: auto;
  .soilHead {
    width: 100%;
    padding: 0 28px 1px;
    box-sizing: border-box;
    margin-top: 15px;

    .soilTitle {
      width: 100%;
      height: 90px;
      box-sizing: border-box;

      .typeLevel {
        width: 100%;
        height: 100%;
        padding: 5px;
        font-size: 16px;
        background: #f4f4f4;
        border-radius: 5px;
        box-sizing: border-box;

        tr:nth-child(1) {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #504f4f;
          opacity: 1;
        }

        tr:nth-child(2) {
          :nth-child(1) {
            color: #c6be6a;
          }

          :nth-child(2) {
            color: #60c8c1;
          }

          :nth-child(3) {
            color: #598eb1;
          }

          :nth-child(4) {
            color: #6ac494;
          }

          :nth-child(5) {
            color: #f8a57f;
          }

          :nth-child(6) {
            color: #e16b85;
          }
        }

        tr {
          height: 50%;
          width: 100%;
        }
      }
    }

    :nth-child(2) {
      margin-top: 10px;
    }

    :last-child {
      margin-bottom: 10px !important;
    }

    .soilTitleValue {
      width: 100%;
      height: 24px;
      margin-bottom: 30px;
      display: flex;
      align-items: center;

      ._text {
        text-align: center;
        // line-height: 30px;
        // width: 15%;
        flex: 1;
        height: auto;
        background: #fff;
        font-size: 16px;
        line-height: 24px;
      }

      ._progress_box {
        // width: 280px;
        width: 81.2%;
        height: 100%;
        position: relative;
      }
    }
  }

  .soilFooter {
    width: 100%;
    padding: 10px 15px 34px 24px;
    background-color: #fff;

    .footer_header {
      width: 100%;
      height: 30px;
      display: flex;
      align-items: flex-start;

      .footer_header_left {
        width: auto;
        height: 100%;
        font-size: 16px;
        line-height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-around;

        :nth-child(1) {
          width: 16px;
          height: 16px;
          background-size: cover;
          margin-right: 10px;
        }
      }
    }

    .footer_item2 {
      width: 100%;
      font-size: 14px;
      text-align: left;
      line-height: 20px;
      color: #8f8f8f;

      span {
        color: #3fa3ed;
      }
    }
  }
}
</style>
